<template>
    <div style="background-color: white">
        <div style="text-align: center"> <img src="../static/images/logo.png" width="120" height="120" style="margin-top:20px;margin-bottom: 20px;">
        </div>
        <van-form>
            <van-field
                    label-align="right"
                    readonly
                    clickable
                    name="picker"
                    :value="value"
                    label="角色"
                    placeholder="点击选择角色"
                    @click="showPicker = true"
            />
            <van-popup v-model="showPicker" position="bottom">
                <van-picker
                        show-toolbar
                        :columns="columns"
                        @confirm="onConfirm"
                        @cancel="showPicker = false"
                />
            </van-popup>


            <van-field
                    label-align="right"
                    v-model="usernumber"
                    name="账号"
                    label="账号"
                    placeholder="账号"
                    :rules="[{ required: true, message: '请填写账号' }]"
            />
            <van-field
                    label-align="right"
                    v-model="password"
                    type="password"
                    name="密码"
                    label="密码"
                    placeholder="密码"
                    :rules="[{ required: true, message: '请填写密码' }]"
            />

            <div style="display: flex">
                <div style="width: 67%">
                    <van-field
                            label-align="right"
                            v-model="myIdentifyCode"
                            name="验证码"
                            label="验证码"
                            placeholder="请输入验证码"
                    />
                </div>
                <div style="width: 33%;display: flex;justify-content: left" class="code" @click="changeCode()">
                    <s-identify :identifyCode="identifyCode"></s-identify>
                </div>
            </div>

            <div style="margin: 16px;text-align: center">
                <van-button style="margin: 5px" @click="loginAction" round size="small" type="info" native-type="submit">
                    登录
                </van-button>

                    <van-button style="margin: 5px" @click="register" round size="small" type="info" native-type="submit">
                        注册
                    </van-button>

            </div>
        </van-form>
    </div>
</template>


<script>
    import SIdentify from '../components/identify.vue'

    export default {
        name: "login",
        components: {
            SIdentify: SIdentify
        },
        data() {
            return {
                value: '',
                columns: ['用户', '律师', '管理员'],
                showPicker: false,
                active: 0,
                usernumber: '',
                password: '',
                identifyCodes: "1234567890",
                identifyCode: "1234",
                myIdentifyCode:""
            }
        },
        mounted() {
            this.identifyCode = '';
            this.makeCode(this.identifyCodes, 4);
        },
        methods: {
            login(){
                this.$router.push('/')
            },
            loginAction() {
                console.log(this.value)
                console.log(this.usernumber)
                console.log(this.password)
                console.log(this.myIdentifyCode)
                console.log(this.identifyCode)
                if (!this.myIdentifyCode) {
                    this.$toast.fail("请填写验证码")
                    return;
                }
                else if (this.myIdentifyCode != this.identifyCode) {
                    this.$toast.fail("验证码错误！")
                    return;
                }
                else if (this.value == '用户') {
                    this.$axios.post('/user/login', {
                        "lawUserNumber": this.usernumber,
                        "lawUserPwd": this.password
                    }, res => {
                        console.log(res)
                        if (res.data.success) {
                            localStorage.setItem('token', JSON.stringify(res.data.data[0]))
                            this.$router.push('/userLayout')
                            this.$toast.success('登陆成功！')
                        } else {
                            this.$toast(res.data.message)
                        }
                    })
                }
                else if (this.value == '律师') {
                    this.$axios.post('/lawyer/login', {
                        "lawLawyerNumber": this.usernumber,
                        "lawLawyerPwd": this.password
                    }, res => {
                        console.log(res)
                        if (res.data.success) {
                            localStorage.setItem('token', JSON.stringify(res.data.data[0]))
                            this.$router.push('/lawyerLayout')
                            this.$toast.success('登陆成功！')
                        } else {
                            this.$toast(res.data.message)
                        }
                    })
                }
                else if (this.value == '管理员') {
                    this.$axios.post('/admin/login', {
                        "lawAdminNumber": this.usernumber,
                        "lawAdminPwd": this.password
                    }, res => {
                        console.log(res)
                        if (res.data.success) {
                            localStorage.setItem('token', JSON.stringify(res.data.data[0]))
                            this.$router.push('/adminLayout')
                            this.$toast.success('登陆成功！')
                        } else {
                            this.$toast(res.data.message)
                        }
                    })
                }
                else{
                    this.$toast.fail('请正确填写每一项信息。')
                }
            },
            register(){
                console.log(this.value)
                if (!this.value){
                    this.$toast.fail('请选择注册用户或律师')
                }else if(this.value=='用户'){
                    this.$router.push({path:'register'})
                }else if (this.value=='律师'){
                    this.$router.push({path:'lawyerRegister'})
                }else {
                    this.$toast.fail('不能注册管理员')
                }
            },
            onConfirm(value) {
                this.value = value;
                this.showPicker = false;
            },
            randomNum(min, max) {
                return Math.floor(Math.random() * (max - min) + min);
            },
            changeCode() {
                this.identifyCode = ''
                this.makeCode(this.identifyCodes, 4)
            },
            makeCode(o, l) {
                for (let i = 0; i < l; i++) {
                    this.identifyCode += this.identifyCodes[
                        this.randomNum(0, this.identifyCodes.length)
                        ];
                }
                console.log(this.identifyCode);
            },

        }
    }
</script>


<style scoped>
    .code {
        margin: 0 auto;
        width: 90px;
        height: 38px;
        /*border: 1px solid red;*/
    }
</style>
